import { defineComponent } from "vue"
import { CnMediumSpan, CnNormalSpan } from "./text"

/**
 * @constructor 分为上下结构
 * @desc 上为左右结构，左边主标题 右边副标题
 * @desc 下为内容，可随意添加
 */
export const CItemUpDown = defineComponent({
  props: {
    title: String,
    subTitle: String,
  },
  setup(props, { slots }) {
    return () => <div class=''>
      <div class='flex justify-between items-center'>
        <CnMediumSpan class='flex-1'>{props.title ? props.title : slots.title?.()}</CnMediumSpan>
        <CnNormalSpan class='text-12'>{props.subTitle}</CnNormalSpan>
      </div>
      <div class='mt-8'>
        {slots.default?.()}
      </div>
    </div>
  }
})

/**
 * @constructor 分为左中右结构
 */
export const CItem = defineComponent({
  props: {
    title: String,
    subTitle: String,
    popover: String
  },
  setup(props, { slots }) {
    return () =>
      <div
        class=''
        style={{
          padding: '10px 24px 16px 30px'
        }}
      >
        <div class='h-full flex justify-between items-center'>
          {slots.title ?
            slots.title?.() :
            props.title ?
              <CnNormalSpan
                class='flex-1 text-text text-left'
              >
                {props.title}
              </CnNormalSpan>
              : null
          }
          <a-popover
            class='mx-16 justify-start'
            content={
              <CnMediumSpan>
                {slots.popover ? slots.popover() :
                  props.popover ? props.popover :
                    slots.default?.()
                }
              </CnMediumSpan>}
            trigger="hover"
          >
            <CnNormalSpan>{slots.default?.()}</CnNormalSpan>
          </a-popover>
          <CnNormalSpan
            class='ml-8 text-right'
          >
            {slots.subTitle ? slots.subTitle?.() : props.subTitle}
          </CnNormalSpan>
        </div>
      </div >
  }
})